System and method for styling content in a graphical user interface control

ABSTRACT

An improved system and method for styling content in a graphical user interface control is provided. An application may define a user interface control having a data object of any type of singular content, including another user interface control. An application may include style declarations that may associate a style resource with the user interface control and a style resource may be dynamically selected for presenting the data object of the user interface control. The style resources may define property values that may be selectively applied to specify a visual representation for the user interface control and data object, such as a visual subtree. A visual representation of the user interface control with the data object may be generated and then a display representation may be rendered for presentation on a user interface display.

FIELD OF THE INVENTION

The invention relates generally to computer systems, and moreparticularly to an improved system and method for styling content in agraphical user interface control.

BACKGROUND OF THE INVENTION

When creating a computer application, a developer typically may chose aparticular environment, or platform on which the application willultimately be executed. For example, when writing an application, thedeveloper may choose to develop the application to run on the MicrosoftWindows® platform. As a result, the program developer may have differentoptions available for defining how user interface objects will lookduring interactions with a user of the application. However, anapplication developer may have only limited control over the userinterface objects. For example, an application developer may typicallychange the labels of buttons, but may not be able to change their colordepending upon the platform, and may not be able to change their shape,border thickness, or even their behavior.

As a result, an application developer may program the application withuser interface elements provided by the platform or may createcustomized user interface elements by defining aspects of theirappearance such as background color, font size, border thickness, and soforth, so that the chosen platform may render the display as intended bythe application developer. Although functional, this process sufferscertain drawbacks. For instance, in order to customize a graphical userinterface control for a particular system, a developer may be requiredto explicitly specify the property values for how the graphical userinterface control will be displayed. This may become a cumbersome andrepetitive process since the customized style may only apply to onegraphical user interface control and the process of customizing thestyle for other graphical user interface controls may need to berepeated for each graphical user interface control. Moreover, suchcontrols traditionally only allowed their data content to be a simplestring since that was the only type of data displayable for a control.

What is needed is a way for an application developer to customize thestyle of any type of graphical user interface control and more easilydefine how the content of the graphical user interface control will lookduring interactions with a user of the application. Such a system andmethod should allow a graphical user interface control to display anytype of data content. Furthermore, the system and method should allow anapplication developer to define a customized style only once fordisplaying the user interface control with a certain type of datacontent so that the customized style may also be used for displayingother user interface controls.

SUMMARY OF THE INVENTION

Briefly, the present invention provides an improved system and methodfor styling content in a graphical user interface control. To this end,an application may define a user interface control having a data objectof any type of singular content, including another user interfacecontrol. An application may include style declarations that mayassociate a style resource with the user interface control and a styleresource may be dynamically selected for presenting the data object ofthe user interface control. The style resources may define propertyvalues that may be selectively applied to specify a visualrepresentation for the user interface control and data object, such as avisual subtree. A styling engine may be provided for applying a styleresource to a user interface control and a content presenter may beprovided for dynamically selecting a style resource for presenting thedata object of the user interface control. Furthermore, a propertyengine may be provided for locating property values, a data bindingengine may be provided for binding properties of the style resource withproperties on data content of the user interface control, and a treeassembler may be provided for generating a visual representation of theuser interface control with the data object. Finally, a rendering enginemay be provided for rendering a display representation of the visualrepresentation for presentation on a user interface display.

The present invention also provides methods for displaying a userinterface control with its data content using associated styleresources. When a request is received to display a user interfacecontrol, style resources associated with the user interface control maybe located and property values of the style resource may be applied tothe user interface control. In applying the style resources, a visualrepresentation of the user interface control with the applied propertyvalues may be generated. A style resource may also be dynamicallyassigned and applied to the data object of the user interface control.For example, a style may be dynamically selected by the content of dataobject, by the type of the data object, by one or more property valuesof the data object, and so forth. In applying the style resource, avisual representation of the data object with the applied propertyvalues may be generated. Finally, a display representation of the userinterface control with the data object may then be rendered forpresentation on a user interface display.

Advantageously, the present invention may associate shared styleresources with several user interface controls for display. By sharingthe style information, an application developer need only define thestyle once. Upon defining the style, the developer may declarativelyassociate any number of user interface controls with the defined style.

Other advantages will become apparent from the following detaileddescription when taken in conjunction with the drawings, in which:

BRIEF DESCRIPTION OF THE DRAWINGS

FIG. 1 is a block diagram generally representing a computer system intowhich the present invention may be incorporated;

FIG. 2 is an exemplary illustration generally representing a userinterface display for an application, in accordance with an aspect ofthe present invention;

FIG. 3 is a block diagram generally representing an exemplaryarchitecture for associating a style with one or more user interfacecontrols for display, in accordance with an aspect of the presentinvention;

FIG. 4 presents an illustration generally representing an exemplary baseclass definition for a user interface control, in accordance with anaspect of the present invention;

FIG. 5 is an illustration generally representing an exemplary classdefinition for a control used for applying a style to a data object fordisplay, in accordance with an aspect of the present invention;

FIG. 6 is an illustration generally representing an exemplary classdefinition for a style selector for selecting a style declared for adata object of a user interface control, in accordance with an aspect ofthe present invention;

FIG. 7 is an illustration generally representing exemplary markuplanguage for defining a style and associating the defined style with auser interface control, in accordance with an aspect of the presentinvention;

FIG. 8 is an illustration generally representing an exemplary visualtree for a user interface control, in accordance with an aspect of thepresent invention;

FIG. 9 is a flowchart generally representing example steps undertakenfor displaying a user interface control with a data object usingseparate style resources, in accordance with an aspect of the presentinvention; and

FIG. 10 is a flowchart generally representing steps undertaken in oneembodiment for determining which style resource to apply to a dataobject of a user interface control, in accordance with an aspect of thepresent invention.

DETAILED DESCRIPTION

Exemplary Operating Environment

FIG. 1 illustrates an example of a suitable computing system environment100 on which the invention may be implemented. The computing systemenvironment 100 is only one example of a suitable computing environmentand is not intended to suggest any limitation as to the scope of use orfunctionality of the invention. Neither should the computing environment100 be interpreted as having any dependency or requirement relating toany one or combination of components illustrated in the exemplaryoperating environment 100.

The invention is operational with numerous other general purpose orspecial purpose computing system environments or configurations.Examples of well known computing systems, environments, and/orconfigurations that may be suitable for use with the invention include,but are not limited to: personal computers, server computers, hand-heldor laptop devices, tablet devices, headless servers, multiprocessorsystems, microprocessor-based systems, set top boxes, programmableconsumer electronics, network PCs, minicomputers, mainframe computers,distributed computing environments that include any of the above systemsor devices, and the like.

The invention may be described in the general context ofcomputer-executable instructions, such as program modules, beingexecuted by a computer. Generally, program modules include routines,programs, objects, components, data structures, and so forth, whichperform particular tasks or implement particular abstract data types.The invention may also be practiced in distributed computingenvironments where tasks are performed by remote processing devices thatare linked through a communications network. In a distributed computingenvironment, program modules may be located in local and/or remotecomputer storage media including memory storage devices.

With reference to FIG. 1, an exemplary system for implementing theinvention includes a general purpose computing device in the form of acomputer 110. Components of the computer 110 may include, but are notlimited to, a processing unit 120, a system memory 130, and a system bus121 that couples various system components including the system memoryto the processing unit 120. The system bus 121 may be any of severaltypes of bus structures including a memory bus or memory controller, aperipheral bus, and a local bus using any of a variety of busarchitectures. By way of example, and not limitation, such architecturesinclude Industry Standard Architecture (ISA) bus, Micro ChannelArchitecture (MCA) bus, Enhanced ISA (EISA) bus, Video ElectronicsStandards Association (VESA) local bus, and Peripheral ComponentInterconnect (PCI) bus also known as Mezzanine bus.

The computer 110 typically includes a variety of computer-readablemedia. Computer-readable media can be any available media that can beaccessed by the computer 110 and includes both volatile and nonvolatilemedia, and removable and non-removable media. By way of example, and notlimitation, computer-readable media may comprise computer storage mediaand communication media. Computer storage media includes volatile andnonvolatile, removable and non-removable media implemented in any methodor technology for storage of information such as computer-readableinstructions, data structures, program modules or other data. Computerstorage media includes, but is not limited to, RAM, ROM, EEPROM, flashmemory or other memory technology, CD-ROM, digital versatile disks (DVD)or other optical disk storage, magnetic cassettes, magnetic tape,magnetic disk storage or other magnetic storage devices, or any othermedium which can be used to store the desired information and which canaccessed by the computer 110. Communication media typically embodiescomputer-readable instructions, data structures, program modules orother data in a modulated data signal such as a carrier wave or othertransport mechanism and includes any information delivery media. Theterm “modulated data signal” means a signal that has one or more of itscharacteristics set or changed in such a manner as to encode informationin the signal. By way of example, and not limitation, communicationmedia includes wired media such as a wired network or direct-wiredconnection, and wireless media such as acoustic, RF, infrared and otherwireless media. Combinations of the any of the above should also beincluded within the scope of computer-readable media.

The system memory 130 includes computer storage media in the form ofvolatile and/or nonvolatile memory such as read only memory (ROM) 131and random access memory (RAM) 132. A basic input/output system 133(BIOS), containing the basic routines that help to transfer informationbetween elements within computer 110, such as during start-up, istypically stored in ROM 131. RAM 132 typically contains data and/orprogram modules that are immediately accessible to and/or presentlybeing operated on by processing unit 120. By way of example, and notlimitation, FIG. 1 illustrates operating system 134, applicationprograms 135, other program modules 136 and program data 137.

The computer 110 may also include other removable/non-removable,volatile/nonvolatile computer storage media. By way of example only,FIG. 1 illustrates a hard disk drive 141 that reads from or writes tonon-removable, nonvolatile magnetic media, a magnetic disk drive 151that reads from or writes to a removable, nonvolatile magnetic disk 152,and an optical disk drive 155 that reads from or writes to a removable,nonvolatile optical disk 156 such as a CD ROM or other optical media.Other removable/non-removable, volatile/nonvolatile computer storagemedia that can be used in the exemplary operating environment include,but are not limited to, magnetic tape cassettes, flash memory cards,digital versatile disks, digital video tape, solid state RAM, solidstate ROM, and the like. The hard disk drive 141 is typically connectedto the system bus 121 through a non-removable memory interface such asinterface 140, and magnetic disk drive 151 and optical disk drive 155are typically connected to the system bus 121 by a removable memoryinterface, such as interface 150.

The drives and their associated computer storage media, discussed aboveand illustrated in FIG. 1, provide storage of computer-readableinstructions, data structures, program modules and other data for thecomputer 110. In FIG. 1, for example, hard disk drive 141 is illustratedas storing operating system 144, application programs 145, other programmodules 146 and program data 147. Note that these components can eitherbe the same as or different from operating system 134, applicationprograms 135, other program modules 136, and program data 137. Operatingsystem 144, application programs 145, other program modules 146, andprogram data 147 are given different numbers herein to illustrate that,at a minimum, they are different copies. A user may enter commands andinformation into the computer 110 through input devices such as atablet, or electronic digitizer, 164, a microphone 163, a keyboard 162and pointing device 161, commonly referred to as mouse, trackball ortouch pad. Other input devices not shown in FIG. 1 may include ajoystick, game pad, satellite dish, scanner, or other devices includinga device that contains a biometric sensor, environmental sensor,position sensor, or other type of sensor. These and other input devicesare often connected to the processing unit 120 through a user inputinterface 160 that is coupled to the system bus, but may be connected byother interface and bus structures, such as a parallel port, game portor a universal serial bus (USB). A monitor 191 or other type of displaydevice is also connected to the system bus 121 via an interface, such asa video interface 190. The monitor 191 may also be integrated with atouch-screen panel or the like. Note that the monitor and/or touchscreen panel can be physically coupled to a housing in which thecomputing device 110 is incorporated, such as in a tablet-type personalcomputer. In addition, computers such as the computing device 110 mayalso include other peripheral output devices such as speakers 195 andprinter 196, which may be connected through an output peripheralinterface 194 or the like.

The computer 110 may operate in a networked environment using logicalconnections to one or more remote computers, such as a remote computer180. The remote computer 180 may be a personal computer, a server, arouter, a network PC, a peer device or other common network node, andtypically includes many or all of the elements described above relativeto the computer 110, although only a memory storage device 181 has beenillustrated in FIG. 1. The logical connections depicted in FIG. 1include a local area network (LAN) 171 and a wide area network (WAN)173, but may also include other networks. Such networking environmentsare commonplace in offices, enterprise-wide computer networks, intranetsand the Internet. When used in a LAN networking environment, thecomputer 110 is connected to the LAN 171 through a network interface oradapter 170. When used in a WAN networking environment, the computer 110typically includes a modem 172 or other means for establishingcommunications over the WAN 173, such as the Internet. The modem 172,which may be internal or external, may be connected to the system bus121 via the user input interface 160 or other appropriate mechanism. Ina networked environment, program modules depicted relative to thecomputer 110, or portions thereof, may be stored in the remote memorystorage device. By way of example, and not limitation, FIG. 1illustrates remote application programs 185 as residing on memory device181. It will be appreciated that the network connections shown areexemplary and other means of establishing a communications link betweenthe computers may be used.

Styling Content in a Graphical User Interface Control

The present invention is generally directed towards a system and methodfor styling content in a graphical user interface control. Inparticular, the present invention relates to providing a user interfacecontrol having a data object of any type of singular content andassociating style resources with the user interface control fordynamically applying a style for displaying the data object. Moreover,the present invention may allow an application developer to define acustomized style only once for displaying the user interface controlwith a certain type of data content so that the customized style mayalso be used for displaying other user interface controls with a dataobject.

As will be seen, the architecture of the present invention may be usedfor development of many different user interface controls and maysupport control composition for creating a control within anothercontrol. As will be understood, the various block diagrams, flow chartsand scenarios described herein are only examples, and there are manyother scenarios to which the present invention will apply.

Turning to FIG. 2 of the drawings, there is shown an exemplaryillustration generally representing a user interface display for anapplication. The computer system 200, which may be representative ofcomputer system 110 in FIG. 1, may render user interface elements fordisplay on display screen 202. The display screen 202 is enlarged inFIG. 2 to show details of the display. The display 202 may relate to adisplay of an example company application used to manage differentportions of a business, employee information for example. Those skilledin the art will appreciate that any other type of content or applicationmay use the present invention.

In this particular example, the display 202 may have a title bar 204 andan employee window 206. There may be other windows for managing otherinformation as indicated by scroll bar 208. Employee window 206 may havea title bar 210, a tool bar 212, and buttons 222, 224, 226, and 228within flow panel 230. Tool bar 212 may provide user controls such as asearch control 214 and an add employee control 216, among potentiallymany others. The user interface controls, buttons, title bars, scrollbars, tool bars and windows are generally known in the art as userinterface elements. A user interface element may also be referred to asa user interface object and means, as used herein, any visual primitiveused to build a graphical user interface screen including withoutlimitation a listbox, combination box, menu, dialog box, a control,toolbar, a frame, a window, and so forth. A user interface control meansany user interface element with its own graphical representation andprogrammed behavior for interacting with a user or the computer systemin response to input such as the occurrence of specific events. A userinterface control may include, for example, a button, a checkbox, a textbox, a scroll bar, and so forth.

Within employee window 206, there are two sub-windows, such as employeelist window 218 and employee detail window 220. In this particularexample, employee window 218 displays a list of all the employeesworking for ABC Company. In a particular embodiment, each user interfacecontrol may be one of a group of user interface controls, such asbuttons 222, 224, 226 and 228, which may be stored in a database orother data store. Each user interface control may have an associated setof properties and data content. For example, the properties for a userinterface control may include a size property, a shape property, aposition property, a background color property and so forth. Any type ofdata content may be associated with the user interface control and aspecific style may also be defined to display that data content.

The present invention relates to the associating of user interfacecontrols, such as the user interface controls represented by FIG. 2 indisplay 202, with user interface style properties in order to provide alayout representation to a rendering engine, which in turn may createthe display representation, as shown in FIG. 2. User interface controls222, 224, 226 and 228, for example, may each be displayed using the samebasic style definition that may also include a style definition for thedata content associated with the user interface controls. For instance,the border thickness and background color used may be the same for eachuser interface control when displayed and the font size and font typeused for displaying the data content may be the same. In general,defining a basic style for displaying properties of a user interfacecontrol need only be done once by a developer of an application and thatstyle may be used for other user interface controls that are to bedisplayed and, significantly, that style may be used by a developer foruser interface controls in any number of other applications.Furthermore, different style definitions may be created for differenttypes of data content which may be dynamically displayed inside a userinterface control.

FIG. 3 presents a block diagram generally representing an exemplaryarchitecture for associating a style with one or more user interfacecontrols for display. Those skilled in the art will appreciate that thefunctionality implemented within the blocks illustrated in the diagrammay be implemented as separate components or the functionality ofseveral or all of the blocks may be implemented within a singlecomponent. For example, the functionality of the layout engine 330 maybe included in the tree assembler 320, or the functionality of theproperty engine 328 may be implemented as a separate component from thetree assembler 320. In an embodiment all the components illustrated inFIG. 3 may reside and operate on a single computer system such as system110 described in conjunction with FIG. 1. Alternatively, one or more ofthe components illustrated in FIG. 3 may be performed on separatecomputer systems in a distributed network, as is known to those skilledin the art.

An application 302 may be any executable software code including akernel component, an application component, a linked library, an object,and so forth. Furthermore, an application 302 may be any number ofdifferent computer applications or programs developed for use on manydifferent types of computer systems. For example, the application 302may be an employee management application such as described inconjunction with FIG. 2. The application 302 may execute on a computersystem such as computer system 110 to display controls of a userinterface, among other things. In an embodiment, the application 302 mayaccess a data store 306, which may persistently store, among otheritems, a plurality of user interface controls 308. Each user interfacecontrol 308 may include a data object 310 which may be any type of datacontent. For instance, the data object may be text, an image, a userinterface element, or other type of object. Each user interface controlmay be defined, for instance by application 302, by using controldefinitions 312. Each user interface control 308 may also includeassociated methods and events (not shown). In accordance withembodiments of the present invention, the user interface controls may beindependent of any associated style for rendering a displayrepresentation of the user interface controls.

In order to associate a style with a user interface control, theapplication 302 may access style resources 314. The style resources 314may be style definitions developed or designed by the developer of theapplication 302 or the definitions may be created by a third party. Thestyle definitions relate to the actual style properties to be associatedwith the user interface controls 308 of an application in order for theuser interface controls to be ultimately displayed. Among the styleresources 314, there may be control styles 316 that may be used fordeveloping a user interface control. A control style may be storedseparately from the user interface controls and may be relativelyindependent of the user interface controls themselves. A control stylemay influence the display of user interface controls in three principalways: (1) by specifying property values for the user interface controlitself, (2) by specifying an internal representation for the userinterface control, such as a visual subtree, and (3) by specifyingproperty values and an internal representation, such as a visualsubtree, for the data object of the user interface control. Forinstance, style definitions may include user interface controlproperties such as the background color, the foreground color, borderthickness, and so forth. The style definition may also include dataobject properties such as the font size (such as 12 or 10 point, etc.),font type (such as Arial or Courier, etc.), font color (such as black orred, etc.), attributes (such as bold or italics, etc.), and so forth.Also, the style definition may also describes a visual subtree to aid inthe creation of an internal visual representation of the user interfacecontrols, such as where a given user interface control should bedisplayed and how the data object of the user interface control shouldbe displayed. The visual tree is discussed in more detail below.

In an embodiment, the application 302 may have style declarations thatmay associate properties of the style resources 314 to user interfacecontrols 308. The style declarations 304 may provide the declarativeprogram statement(s) that associates one or more user interface controlsto a control style. Such an association may be made by explicitlyidentifying the data types and the data style for that type, or byproviding a style selector call, or by providing a default style, or bysome other method.

Application 302 may operate on platform 318. Platform 318 may includethe framework or application programming interface (API) that mayprovide the necessary communication between the application 302 and theoperating system of the computer, such as computer 110 shown in FIG. 1.As such, the platform 318 may provide the intermediate functions andservices that may allow the application 302 to ultimately display userinterface elements, such as user interface controls 308, on a userinterface display 334. Although not shown, the operating system and itsnecessary operations occur between platform 318 and display 334. In aparticular embodiment of the invention, the platform 318 may be theMicrosoft Windows platform developed by Microsoft Corporation.

Within the platform 318, a tree assembler 320 parses the informationreceived from the application 302 in order to build a “visual tree”which is an internal representation of the display and thus representsthe combination of the data from the user interface controls 308 to bedisplayed and the information from the style resources 314 thatdescribes how to display the data. The visual tree is described in moredetail below in conjunction with FIG. 8. In an embodiment, the treeassembler 320 includes a styling engine 322 for locating and applyingthe appropriate style elements, a property engine 328 for locating theappropriate property values, and a data binding engine 326 to associateproperties of a user interface elements with properties on data objects.The styling engine 322 may include a content presenter 324 for locatingand applying the appropriate style elements to a data object of a userinterface control. In one embodiment, the application 302 may makerequests to the styling engine 322 to lookup the correct styledefinition, then the application 302 may make requests to the propertyengine 328 to lookup the appropriate property values specified by thestyle definition, and finally the application 302 may make requests tothe data binding engine 326 to bind properties of the user interfaceelements with properties on data objects. These requests may bedeclarative, i.e., interpreted by the tree assembler 320, or procedural,i.e., the application 302 calls the binding methods at runtime.Additionally, data binding can also be performed by aliasing to createassociations between properties on the elements in a visual tree and theproperties of the element being styled, also referred to as the styledparent. This may allow a user of a user interface object such as acomponent to manipulate properties of the visual tree via direct objectmanipulation on the component itself. In one embodiment, the associationof the properties may be stored in the style. Moreover, the controlstyles 316, may also have a declarative request for binding to data aswell. In such a case the data binding engine 326 may handle theserequests too. More details of the binding process may be found incopending U.S. patent application Ser. No. 10/440,081, titled “SYSTEMAND METHOD FOR CONTROLLING USER INTERFACE PROPERTIES WITH DATA” filed onOct. 23, 2003, assigned to the assignee of the present application, andincorporated herein by reference for all that it discloses and teaches.

In an embodiment, the tree assembler 320 receives the user interfacecontrols and the style information directly from the application 302. Inother embodiments, the tree assembler 320 may access the required userinterface controls directly from the data store 306 and the stylesresources 314, respectively, through the operation of the data bindingengine 326. In doing so, the tree assembler 320 understands where tolook and what to find based on the style binding information receivedfrom the application's style declarations 304.

The tree assembler 320 may complete the visual tree and pass the tree tothe rendering engine 332. In an embodiment, the tree may be passedrelatively directly to the rendering engine 332, which, in turn may usethe visual tree to render a display representation of the user interfaceelements on the user interface display 334. In an alternativeembodiment, the visual tree may be passed first to a layout engine 330that may add more information to the visual tree, using user interfaceelements from a user interface object factory to complete the tree. Thelayout engine, in an embodiment, may understand the physical propertiesof the display such that it may determine where to place certain displayitems and how large to make them relative to the physicalcharacteristics of a particular computer system. The application 302 andthe tree assembler 320 may typically operate in a dynamic environmentwhereby the tree assembler 320 may make an initial visual tree and, asthe application 302 runs and display items may change, the treeassembler 320 may rewrite or modify the visual tree to update thedisplay representation on the user interface display 334.

In one embodiment, a user interface control may be a subclass of a baseclass of controls which may show singular content as a data object. FIG.4 presents an illustration generally representing an exemplary baseclass definition for a user interface control named ContentControl 402.ContentControl may be a control that forms a base class of controlswhich may have a data object of any type of singular content. Forexample, a button, a textbox, a checkbox and other controls which mayshow singular content as their data object may be instances of asubclass of ContentControl. The base class definition of ContentControl402 may include a content object named Content 404 and a style namedContentStyle 406. The Content may be the data object which representsthe singular content displayed by the user interface control. TheContentStyle may be a style having properties for displaying the dataobject. One way a style may be associated with a data object of a userinterface control is by assigning a style to ContentStyle. This stylemay then by used to create a display representation of the data objectin the user interface control.

Once a style has been associated with a data object of a user interfacecontrol, the style may be applied to the data object for displaying thedata inside the user interface control. FIG. 5 presents an illustrationgenerally representing an exemplary class definition for a control usedfor applying a style to a data object for display. The illustrationshows a definition of a control named ContentPresenter 502 that may beused to apply a content style to a data object to display the datainside a user interface control. The class definition ofContentPresenter 502 may include three properties: a data object namedContent 504, a style named ContentStyle 506, and a style selector namedContentStyleSelector 508. The Content property of type object may be setto any content by an application author. For instance, the content maybe another control or any type of data object including a string, an XMLnode, an image and so forth. The ContentStyle property of type style maybe set to a style for displaying the data object of the user interfacecontrol. And the ContentStyleSelector property allows an applicationauthor to program logic for dynamically providing a style for the dataobject. Thus, the ContentPresenter may apply the style identified byContentStyle or returned by a call to ContentStyleSelector to theContent for displaying the data object inside a user interface control.ContentPresenter may dynamically determine a style for the type of dataand apply it.

The ContentStyleSelector may select a style for a given data object.FIG. 6 presents an illustration generally representing an exemplaryclass definition for a style selector for selecting a style declared fora data object of a user interface control. The definition of the styleselector 602 illustrated in FIG. 6 may have one method for returning astyle for a data object. A subclass may override this method in order toprovide logic for selecting a style dynamically for a given data objectand returning the style to apply to a data object for displaying thedata inside a user interface control.

A style may be considered a set of property values that may be appliedto a user interface element for presenting a display representation ofthe user interface element. Associating a set of property values with auser interface control may be accomplished using a defined style. FIG. 7presents an illustration generally representing exemplary markuplanguage for defining a style and associating the defined style with auser interface control. Lines 702-720 show a style definition of abutton which includes a ContentPresenter declared on line 708 that maydetermine how to display the data object of the button. Lines 710-714also show the three properties of ContentPresenter: the Content,ContentStyle and ContentStyleSelector. Each of these properties may bealiased to the target type of the user interface control what is beingstyled which, in this example, may be the button. When a ContentControlmay be created, bindings may be set up between the properties of theContent, ContentStyle and ContentStyleSelector of the ContentControl tothe corresponding properties on the ContentPresenter. TheContentPresenter may then use these properties when determining whichstyle to apply to the content of the data object in the user control.Furthermore, any changes to these properties on the ContentControl mayautomatically update the corresponding properties on theContentPresenter.

Lines 722-744 show another style for a button declared at line 724 thatmay have a data object that is a string, namely “OK”. In addition to thedata object, other user interface elements are shown that may bedisplayed around the data object. For example, a dock panel declared online 728 may be displayed within the button. There may be text declaredon line 730 accompanied by an image declared on line 732 within the dockpanel. A border declared on line 734 may surround a ContentPresenterdeclared on line 736 that indicates where the data object should beplaced within the button.

Lines 746-756 show a third style for a user interface control having adata type of type “Person”. A ContentPresenter declared on line 748 mayhave an image declared on line 752 to be displayed as the data object ofthe user interface control. In one embodiment, a user interface controlmay have a data context property associated with it that may provide adefault data source for binding to properties of the user interfacecontrol. The ContentPresenter may likewise include a data contextproperty that may be set to the user interface control for establishingdata bindings of properties of the data object to the propertiesassigned to the user interface control. When the ContentPresenter mayapply a style to a data object for creating a visual representation ofthe data object, any property values bound to values of the data objectmay be resolved by retrieving the corresponding values found in thevisual representation for the user interface control.

FIG. 8 presents an illustration generally representing an exemplaryvisual tree for a user interface control, namely a button with the styledefined in lines 722-744 of FIG. 7 applied to it. A “visual tree” may bea representation in a tree-like structure having nodes for the visualrepresentation of the user interface elements to be displayed. Not alluser interface elements may be in a visual tree because not all userinterface elements may have visual information. The button may be one ofmany user interface elements presented on a visual display, and,consequently, the visual representation for the button may be a visualsubtree 802 which represents only part of a potentially larger visualtree that may include all the user interface elements presented on avisual display. In general, the tree assembler, such as tree assembler320 shown in FIG. 3, may set the assigned property values of the button,create a copy of the visual subtree specified by the style, and add thevisual subtree to the visual tree.

The first item shown in the visual subtree 802 is a button item 804.When building the tree, the tree assembler may encounter the button itemdeclared on line 724 in FIG. 7. Upon encountering the buttondeclaration, a node for the button item may be created to be placed inthe visual subtree at position 804. Next, an inquiry may be performed todetermine the style information for the button item. Such styleinformation may include property values of the button as well asproperty values of the visual subtree for the button. This visualsubtree might contain borders or shading information, a backgroundcolor, and so forth. The tree assembler may set the properties of thebutton to their desired values, creates a copy of the desired visualtree, and adds it to the main visual tree at position 806.

The tree assembler may subsequently encounter the Dock Panel itemdeclared on line 728 in FIG. 7, and a node for the Dock Panel item 808may be created and placed in the subtree at position 808. Similarly, thetree assembler may then encounter the text item declared on line 730 inFIG. 7, the image item declared on line 732 in FIG. 7, and the borderitem declared on line 734 in FIG. 7. These items may be place in thesubtree at positions 810, 812 and 814 respectively. Additionally, aninquiry may be performed to determine the style information for theseitems and the tree assembler may set the properties of these items totheir desired values.

The tree assembler may next encounter the ContentPresenter declared online 736 in FIG. 7. In general, the ContentPresenter may serve toindicate where the data object should be displayed within the button,may determine the style for displaying the data object within thebutton, and may apply the style to create the visual subtree for thedata object. The data object for the button may be the string “OK” whichwas assigned to the Content of the button in the declaration for thebutton on line 724. The ContentPresenter may determine to display thedata object in a Text control and properties of the Text control may bealiased to corresponding properties of the ContentPresenter to control,for example, the font, foreground color, and other text properties.Whenever the layout engine may query the properties of ContentPresenterto provide a layout representation to the rendering engine, theContentPresenter may apply the style for the data object and may expandthe visual tree to include the Text control as the representation forthe data object. In one embodiment, a binding may be made like thatappearing in line 752 of FIG. 7 instead of the actual text so that ifthe data may change in the data object, the data associated with thevisual tree 802 will correspondingly change.

Upon completing the visual subtree 802 and adding the visual subtree 802to the visual tree, the visual tree may be passed to a layout engine,such as engine 330 in FIG. 3 for including additional user interfaceelements prior to being sent to the rendering engine 332. In anotherembodiment, the layout engine may call the tree assembler as needed togenerate the tree just in advance of the layout process. Renderingengine 332 may render a display representation from the visual tree forpresentation on a user interface display.

FIG. 9 presents a flowchart generally representing example stepsundertaken for displaying a user interface control with a data objectusing separate style resources. Those skilled in the art will appreciatethat an implementation may choose to perform these steps in a differentorder for purposes of efficiency or flexibility, while achieving thesame effect and without departing from the scope of the presentinvention. In one embodiment, an application such as application 302 inFIG. 3 may be running on a platform, such as platform 318 in FIG. 3,which is executing on a computer system, such as computer system 110 inFIG. 1.

At step 902, a request to display a user interface control may bereceived. Upon receiving the request, one or more style resourcesassociated with the user interface control may be located at step 904.To locate the style resources associated with the user interfacecontrol, a style lookup may be performed to determine whether a stylewas declared by the application such as in style declarations 304 ofFIG. 3, or whether a default style was provided for the user interfacecontrol, or whether property values may be inherited from a parent userinterface control if a style defining that property value is not found.

Upon locating the style resources associated with a user interfacecontrol, the style resources may be applied to the user interfacecontrol at step 906. In applying a style to a user interface control,any property values defined for the visual representation of the userinterface control, such as a set of property values for building avisual tree, may be applied at step 908. To apply the property valuesdefined for the visual tree, the assigned property values may be set forthe user interface control, a copy of the visual subtree specified bythe style may be created for the user interface control, and the visualsubtree for the user interface control may be added to the visual tree.Any property values declared in the style definition using data bindingmay also be resolved in building the visual tree.

After applying the property values defined for the visual representationof the user interface control, a style resource may be dynamicallyassigned to the data object of the user interface control at step 910and then applied at step 912. Dynamically assigning and applying a styleresource to the data object of a user interface control may be describedin more detail below in conjunction with FIG. 10. In applying the styleresource, any property values defined for the visual representation ofthe data object, such as a set of property values for building a visualtree, may be applied at step 914. To apply the property values definedfor the visual tree, the assigned property values may be set for thedata object, a copy of the visual subtree specified by the style may becreated for the data object, and the visual subtree for the data objectmay be added to the visual tree. Any property values declared in thestyle definitions using databinding may also be resolved in building thevisual tree.

After applying the property values defined for the visual representationof the data object of the user interface control, a displayrepresentation of the visual representation of the user interfacecontrol with the data object may be rendered at step 916. Upon renderingthe display representation, the process is finished.

FIG. 10 presents a flowchart generally representing steps undertaken inone embodiment for determining which style resource to apply to a dataobject of a user interface control. At step 1002, it may be determinedwhether the content of the data object may be a text element. If so,then a style may be applied at step 1004 that may add a text controldirectly as a child of the ContentPresenter in the visual tree. Forexample, the Content property of ContentPresenter may be set to a textelement, which may be a list, table, paragraph, and so forth. Inaddition to adding the text control as a child of the ContentPresenterin the visual tree, properties of the text control may be aliased tocorresponding properties of the ContentPresenter to specify, forexample, the font, foreground color, and other text properties.Moreover, if this text element had a subtree, it may be place into thetree as a child of the text control.

If the content of the data object is not a text element, then it may bedetermined at step 1006 whether the content is a user interface elementitself. If so, then a style may be applied at step 1008 that may add anembedded object directly as a child of the ContentPresenter in thevisual tree. For example, the Content property of ContentPresenter maybe set to any user interface element. In this case, the user interfaceelement may be placed directly in the tree as an embedded object.

If the content of the data object is not a user interface element, thenit may be determined at step 1010 whether the content style may beexplicitly set. If so, then that style may be chosen to be applied tothe data object at step 1012. For instance, the ContentStyle property ofthe ContentPresenter may be assigned a style such as by an application.The data context property of the ContentPresenter could be set to theuser interface control for establishing data bindings of properties ofthe data object to the properties assigned to the user interfacecontrol.

If the content style is not explicitly set, then it may be determined atstep 1014 whether the content style may be selected by using a contentstyle selector. If so, then the style returned by a call to logic forchoosing a style may be applied to the data object at step 1016. Forexample, the ContentStyleSelector property of the ContentPresenter maybe set, for instance, by an application. In this case, a call may bemade to a method provided by an application author for returning a stylefor a given data object. In other embodiments, the method may beprovided as part of the platform, the operating system, anotherapplication, a user library, and so forth. Thus, this mechanism may beused to dynamically select a style for a given data object. Thismechanism may advantageously allow the value of the content on a buttonto change during the lifetime of an application. For example, sometimesthe content of a button would be a person object, and at other times thecontent of the button would be a customer object. This mechanism maythen be used to select the style that is appropriate for the personobject whenever the content of the button may be the person object andthis mechanism may be used to select the style that is appropriate forthe customer object whenever the content of the button may be thecustomer object. Moreover, the style may be selected either by content,type or property values. For instance, a property value may be useddirectly or as part of an expression, such as if the person's age may beover thirty years old, to select a style. This mechanism providesflexibility for any logic to be used to map a content type or propertyvalue of content to a content style. Furthermore, this mechanism mayprovide a procedural way for an application to decide what style may beused for displaying the content of a user interface control.

If the content style is not selected by using a content style selector,then it may be determined at step 1018 whether there may be a styleapplicable for the type of content of the data object. If so, a stylefor the type of data object may be found by a data-style lookup andapplied at step 1020. In one embodiment, a data-style lookup may searchfor a style resource that may have a type value for a style applicableto the type of the content. To do so, the data-style look up may searchfor style resources in an application resource dictionary or in a systemresource dictionary for the type of content and also the type of baseclass of the content to find the most specific type of class. Such aresource dictionary may have a key, comprising the type of content andtype of content presenter, and an associated style. If the data-stylelook up finds a key for the type of content and the type of contentpresenter, then that style may be used.

If a style applicable for the type of content of the data object is notfound at step 1018, then it may be determined at step 1022 whether thecontent of the data object may be a string of characters. If so, then astyle may be applied at step 1024 that may add a text control directlyas a child of the ContentPresenter in the visual tree with the stringassigned or aliased as content of the text control. In addition toadding the text control as a child of the ContentPresenter in the visualtree, properties of the text control may be aliased to correspondingproperties of the ContentPresenter to specify, for example, the font,foreground color, and other text properties.

If the content of the data object is not a string, then it may bedetermined at step 1026 whether the content of the data object may be anXML node. If so, then a style may be applied at step 1028 that may add atext control directly as a child of the ContentPresenter in the visualtree with the text of the XML node assigned as content of the textcontrol. In one embodiment, the text of the XML node may be assigned ascontent of the text control by binding the path of the text of the XMLnode to the content of the text control.

Finally, if the content of the data object is not an XML node, then itmay be determined at step 1030 whether there is a type converter thatmay, for instance, produce a string or user interface element. If so,then a type converter may be applied at step 1032 and a style may thenbe applied to the content from the type converter at step 1036. Forexample, if the type converter produced a string, then the style may beapplied as described at step 1024. In this case, a text control may beadded directly as a child of the ContentPresenter in the visual treewith the string assigned or aliased as content of the text control. Asanother example, if the type converter produced a user interfaceelement, then the style may be applied as described at step 1008. Inthis case, the user interface element may be directly added as a childof the ContentPresenter in the visual tree.

If there is not any type converter that may produce a string or a userinterface element, then the ToString( ) method of the data object may becalled at step 1034 which may provide a string, and then a style may beapplied at step 1036 such as described at step 1024. A text control maybe added directly as a child of the ContentPresenter in the visual treewith the string assigned or aliased as content of the text control.After step 1036, processing is finished for determining which styleresource to apply to a data object of the user interface control.

Using the above systems and methods, an application author may providecustomized styles for presenting data in a user interface control. Astyle may be dynamically selected for a given data object by content,type of content, or one or more property values of the data object. Thepresent invention may thus advantageously support changing the value ofthe content displayed by a use interface control during the lifetime ofan application. Moreover, the defined styles can be used for one or moredifferent user interface controls. Importantly, the application authorcan assign style information in a declarative manner to program how auser interface control may look when displayed and how an end user mightinteract with the user interface control. In doing so, the styleresources may be separated from the user interface control and its dataobject. Consequently, the author or an end user may change the styleresources without changing the user interface controls. Likewise, theauthor may adjust the user interface controls without changing the styleresources.

As can be seen from the foregoing detailed description, the presentinvention provides an improved system and method for styling content ina graphical user interface control. Significantly, the system and methodallow a graphical user interface control to display any type of datacontent, including another control. Moreover, style resources may beassociated with the user interface control for dynamically applying astyle for displaying the data object. The architecture of the presentinvention may support a number of ways to provide a style for displayingthe data content of a user interface control, including by type, bycontent, by property value, and so forth. In general, defining a basicstyle for displaying properties of a user interface control with a dataobject need only be done once by a developer of an application and thatstyle may be used for other user interface controls that are to bedisplayed. As is now understood, the system and method thus providesignificant advantages and benefits needed in contemporary computing.

While the invention is susceptible to various modifications andalternative constructions, certain illustrated embodiments thereof areshown in the drawings and have been described above in detail. It shouldbe understood, however, that there is no intention to limit theinvention to the specific forms disclosed, but on the contrary, theintention is to cover all modifications, alternative constructions, andequivalents falling within the spirit and scope of the invention.

1. A computer system for displaying a user interface element,comprising: a user interface control having a data object of any type ofsingular content; one or more style resources having property values tobe assigned to the user interface control and to the data object of theuser interface control; a styling engine for applying the assignedproperty values of the one or more style resources to the user interfacecontrol and to the data object of the user interface control; and arendering engine operably coupled to the styling engine for rendering adisplay representation of the user interface control with the dataobject for presentation on a user interface display.
 2. The system ofclaim 1 further comprising a tree assembler operably coupled to thestyling engine for generating a visual representation of the userinterface control with the applied property values of the one or morestyle resources and for generating a visual representation of the dataobject with the applied property values of the one or more styleresources.
 3. The system of claim 1 further comprising an applicationoperably coupled to control definitions used for declaring the userinterface control having the data object of any type of singularcontent.
 4. The system of claim 1 further comprising an applicationoperably coupled to the one or more style resources and to the userinterface control, the application having style declarations forassociating the one or more style resources with the user interfacecontrol and for associating the one or more style resources with thedata object of the user interface control.
 5. The system of claim 1further comprising a content presenter operably coupled to the stylingengine for dynamically assigning (determining—dependent method claim) astyle resource of the one or more style resources to the data object ofthe user interface control.
 6. The system of claim 1 further comprisinga property engine operably coupled to the styling engine for locatingthe property values.
 7. The system of claim 1 further comprising a databinding engine operably coupled to the styling engine for binding theproperty values to the user interface control and to the data object ofthe user interface control.
 8. The system of claim 2 further comprisinga layout engine operably coupled to the tree assembler for generating alayout of the user interface control with the applied property values ofthe one or more style resources and for generating a layout of the dataobject of the user interface control with the applied property values ofthe one or more style resources.
 9. The system of claim 1 furthercomprising a user interface display operably coupled to the renderingengine for displaying the display representation.
 10. The system ofclaim 1 wherein the one or more styling resources comprises a controlstyle.
 11. A computer-readable medium having computer-executablecomponents comprising the system of claim
 1. 12. A method for displayinga user interface element in a computer system, comprising: receiving arequest to display a user interface control having a data object of anytype of singular content; locating a first style resource associatedwith the user interface control; applying the property values of thefirst style resource to the user interface control; dynamicallyassigning a second style resource to the data object of the userinterface control; applying the property values of the second styleresource to the data object of the user interface control; generating avisual representation of the user interface control with the dataobject; and rendering a display representation of the visualrepresentation of the user interface control with the data object forpresentation on a user interface display.
 13. The method of claim 12further comprising associating the first style resource with the userinterface control.
 14. The method of claim 13 wherein associating thefirst style resources with the user interface control comprisesproviding a style declaration assigning the first style resource to theuser interface control.
 15. The method of claim 12 further comprisingbinding property values of the user interface control to thecorresponding property values of a content presenter.
 16. The method ofclaim 12 further comprising binding the property values in the visualrepresentation with properties on the data object of the user interfacecontrol.
 17. The method of claim 12 further comprising generating alayout of the user interface control with the applied property values ofthe first style resource.
 18. The method of claim 12 further comprisinggenerating a layout of the data object with the applied property valuesof the second style resource.
 19. The method of claim 12 furthercomprising displaying the display representation on the user interfacedisplay.
 20. The method of claim 12 further comprising providingdeclarations that define the second style resource with property valuesto be selectively applied to the data object of the user interfacecontrol.
 21. The method of claim 20 wherein providing declarations thatdefine the second style resource with property values to be selectivelyapplied to the data object comprises providing a declaration explicitlyspecifying the style to be applied to the data object.
 22. The method ofclaim 20 wherein providing declarations that define the second styleresource with property values to be selectively applied to the dataobject comprises providing a declaration specifying a call to executablecode provided by the application to dynamically select the style to beapplied to the data object.
 23. The method of claim 20 wherein providingdeclarations that define the second style resource with property valuesto be selectively applied to the data object comprises providing adeclaration specifying the type of data object for which a style may bedynamically selected that may apply to the type of the data object. 24.The method of claim 12 wherein dynamically assigning the second styleresource to the data object of the user interface control comprisesassigning a style explicitly specified by an application.
 25. The methodof claim 12 wherein dynamically assigning the second style resource tothe data object of the user interface control comprises assigning astyle selected by executable code provided by an application.
 26. Themethod of claim 12 wherein dynamically assigning the second styleresource to the data object of the user interface control comprisesassigning a style declared for a data type that may apply to the type ofthe data object.
 27. The method of claim 12 wherein dynamicallyassigning the second style resource to the data object of the userinterface control comprises assigning a style for adding a userinterface element to the visual representation as an embedded object.28. The method of claim 12 wherein dynamically assigning the secondstyle resource to the data object of the user interface controlcomprises assigning a style for adding a text element to the visualrepresentation as a text control.
 29. A computer-readable medium havingcomputer-executable instructions for performing the method of claim 12.30. A computer system for providing a user interface element,comprising: a control definition used for declaring a user interfacecontrol having a data object of any type of singular content; one ormore style resources having property values for assigning to the userinterface control and for assigning to the data object of the userinterface control; an application operably coupled to the controldefinition for declaring the user interface control and for associatingproperty values of the one or more style resources to the user interfacecontrol and to the data object of the user interface control; and acontent presenter operably coupled to the application for dynamicallyassigning a style resource to the data object of the user interfacecontrol.
 31. The method of claim 30 further comprising a data storeoperably coupled to the application for persistently storing thedeclared user interface control with the data object.
 32. The method ofclaim 30 wherein the data object comprises another user interfacecontrol.
 33. The method of claim 30 wherein the data object comprises auser interface element.
 34. The method of claim 30 wherein the dataobject comprises a text control.
 35. A computer system for displaying auser interface object, comprising: means for providing a user interfacecontrol having a data object of any type of singular content; means forproviding a first style resource having property values to be assignedto the user interface control; means for applying the property values ofthe first style resource to the user interface control; means forproviding a second style resource to the data object of the userinterface control; means for applying the property values of the secondstyle resource to the data object of the user interface control; andmeans for rendering a display representation of a visual representationof the user interface control with the data object for presentation on auser interface display.
 36. The system of claim 35 further comprisingmeans for assigning the first style resource associated with the userinterface control;
 37. The system of claim 35 further comprising meansfor assigning the second style resource associated with the data objectof the user interface control;
 38. The system of claim 35 furthercomprising means for locating the second style resource provided for thedata object of the user interface control.
 39. The system of claim 35further comprising means for generating a visual representation of theuser interface control with the data object.
 40. The method of claim 35further comprising means for displaying the display representation onthe user interface display.